<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>每天吃什么抽签</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      text-align: center;
    }

    h1 {
      margin-top: 50px;
    }

    .food {
      font-size: 24px;
      margin-top: 20px;
      color: #333;
    }
  </style>
</head>
<body>
  <h1>每天吃什么抽签</h1>
  <div class="food" id="food-of-the-day"></div>
  <button id="start-btn">开始</button>
  <button id="end-btn">结束</button>

  <script>
    // 定义食物列表
    const foodList = [
      '牛肉面',
      '麻辣烫',
      '炸鸡',
      '拉面',
      '饺子',
      '馅饼',
      '炒饭',
      '火锅',
      '汉堡',
      '馄饨',
      '烧烤',
      '米线',
      '烤肉饭',
    ];

    let intervalId = null;

    function startRandomFood() {
      intervalId = setInterval(() => {
        // 获取随机食物
        const randomFood = foodList[Math.floor(Math.random() * foodList.length)];

        // 将食物显示在页面上
        const foodElement = document.getElementById('food-of-the-day');
        foodElement.innerText = `今天吃什么？${randomFood}！`;
      }, 10); // 每隔500毫秒切换一次食物
    }

    function stopRandomFood() {
      clearInterval(intervalId);
    }

    // 添加按钮点击事件监听器
    document.getElementById('start-btn').addEventListener('click', startRandomFood);
    document.getElementById('end-btn').addEventListener('click', stopRandomFood);
  </script>
</body>
</html>